<template>
	<view>
		<up-navbar title="提现" placeholder :autoBack="true">
			<!-- 		<template #right>
			</template> -->
		</up-navbar>
		<block v-if="info">
			<view class="w-1 relative fl-s-c">
				<view class="relative w-1 p-30">
					<view class="tw-box">
						<view class="bb-solid w-1 fl-s-s">
							<text class="c-00 fs-40 bold">提现金额
								<!-- <view @click="$u.route('/pagemaster/pages/User/WithdrawalRecord')"
									style="color: #3E8BFF;" class="c-33 fs-28"></view> -->

							</text>
							<view class="w-1 fr-s-c m-t-50">
								<text class="c-33 fs-40 bold">￥</text>
								<u--input color="#333333" fontSiz="40rpx" class="bold" clearable type="digit"
									placeholder="请输入提现金额" border="none" v-model="value"></u--input>
							</view>
							<view class="w-1 bb-solid m-t-30"></view>
						</view>
						<view class="fl-s-s m-t-30">
							<text class="c-33 fs-24 bold ">手续费：{{info.sxf*100}}%</text>
							<text class="c-33 fs-24 bold m-t-20">实际到账：￥{{(value*(1-info.sxf)).toFixed(2)}}</text>
							<view class="fr-s-c c-33 fs-24 bold m-t-20">
								<text>账号余额：￥{{info.money}}</text>
								<text class="fs-24 bold m-l-40" style="color: #3E8BFF;"
									@click="value=info.money*1">全部提现</text>
								<text class="fs-24 bold m-l-40" style="color: #3E8BFF;"
									@click="$u.route('/pagemaster/pages/User/WithdrawalRecord')"> 提现记录</text>
							</view>
						</view>
					</view>
					<text class="c-99 fs-24 m-t-20">单笔最小限额￥{{info.zd_txset}}，单笔最大限额￥5000.00，每日限额￥\n10000.00</text>
					<!-- <view class="w-1 m-b-20">
						<u-tabs :current="curtab" lineWidth	="106rpx" lineColor="#01796D" :inactiveStyle="inactiveStyle"
							:activeStyle="activeStyle" linebarwidh :list="tabs" @click="clickTab"></u-tabs>
					</view> -->
					<view class="c-33 m-t-30 fs-32 bold m-b-20">提现到银行卡</view>
					<view class="w-1 fr-s-c m-b-30" @click="cur=index" :class="cur==index?'card-act':'card'"
						v-for="(item,index) in list" :key="index">
						<image v-if="cur!=index" src="/static/images/tab4/card.png" style="width: 99rpx; height: 68rpx;"
							mode=""></image>
						<image v-else src="/static/images/tab4/cards.png" style="width: 99rpx; height: 68rpx;" mode="">
						</image>
						<view class="fl-c-s m-l-15" :class="cur==index?'c-main':'c-77'">
							<text class=" fs-28 bold">{{item.bank_name}}</text>
							<text class=" fs-24 m-t-5">{{item.account}}</text>
						</view>
					</view>
					<view class="card w-1 fr-s-c m-b-30" @click="$u.route('/pagemaster/pages/User/addcard')">
						<!-- <view class="card w-1 fr-s-c m-b-30" @click="$u.route('/pagemaster/pages/User/bankcard')"> -->
						<!-- <image src="/static/images/t3/add.png" style="width: 40rpx; height: 40rpx;" mode=""></image> -->
						<u-icon name="plus" color="#01796d" bold></u-icon>
						<text class="c-33 fs-28 bold m-l-15">添加银行卡</text>
					</view>

					<!-- <view class="big-btn c-ff fr-c fs-32" @click="sub" style="margin: 80rpx auto;">提现</view> -->
				</view>
			</view>
			<view style="height: 200rpx;"></view>
			<view class="iphonex w-1">
				<view class="w-1 p-30">
					<view class="big-btn" @click="sub">提现</view>
				</view>
			</view>

			<u-popup :show="show" round="20rpx" closeable @close="show=false">
				<view class="w-1 fl-s-c p-30">
					<text class="c-33 fs-28 bold">绑定支付宝</text>
					<input type="text" focus :cursor-spacing="82" v-model.trim="account"
						class="w-1 fs-28 m-t-50 bb-solid" style="height: 80rpx;" :placeholder="`请输入支付宝账号`" />
					<input type="text" :cursor-spacing="82" v-model.trim="inputname" class="w-1 fs-28 m-t-30 bb-solid"
						style="height: 80rpx;" placeholder="请输入真实姓名" />
					<view class="fr-c bg-main p-30 fs-30 br-41 c-ff w-1" style="margin-top: 25px;" @click="subbind">确定
					</view>
				</view>
			</u-popup>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				cur: 0,
				list: [],
				tabs: [{
					name: '提现到银行卡',
				}, {
					name: '提现到支付宝',
				}],
				curtab: 0,
				inactiveStyle: {
					'font-weight': 400,
					'font-size': '28rpx',
					color: '#545454',
				},
				activeStyle: {
					'font-weight': 800,
					'font-size': '28rpx',
					color: '#01796D'
				},
				account: '',
				inputname: '',
				alicard: '',
				aliname: '',
				show: false,
				info: ''
			}
		},
		onLoad() {
			this.getinfo()
		},
		onShow() {
			this.getlist(false)
		},
		methods: {
			getlist(loading = true) {
				uni.$post({
					url: '/api/center/pmbankcard',
					loading
				}).then(res => {
					this.list = res.data;
					this.nodata = !this.list.length;
				})
			},
			getinfo(loading = true) {
				uni.$post({
					url: '/api/center/withdrawalcacheinfo',
					loading
				}).then(res => {
					this.info = res.data;
					this.account = res.data.alicard;
					this.inputname = res.data.aliname;
				})
			},
			clickTab(e) {
				this.curtab = e.index;
			},
			bindaliwe(type) {
				this.show = true;
			},
			subbind() {
				if (!this.account) return uni.$u.toast('请输入支付宝账号');
				if (!this.inputname) return uni.$u.toast('请输入您的姓名');
				uni.$post({
					url: '/api/User/Upmywxali',
					data: {
						alicard: this.account,
						aliname: this.inputname,
					}
				}).then(res => {
					getApp().tt('绑定成功', 'success')
					this.show = false;
					this.getinfo(false)
				})
			},
			sub() {
				if (!this.value) return uni.$u.toast('请输入提现金额');
				if (this.value * 1 < this.info.zd_txset) return uni.$u.toast(`单笔最小金额${this.info.zd_txset}元`);
				if (this.value * 1 > 5000) return uni.$u.toast('单笔最大金额5000元');
				if ((this.curtab == 0 && this.cur == -1) || !this.list.length) return uni.$u.toast('请选择银行卡');
				if (this.curtab == 1 && !this.info.alicard) return uni.$u.toast('请绑定支付宝信息');
				let obj = null;
				if (this.curtab == 1) {
					obj = {
						alicard: this.info.alicard,
						aliname: this.info.aliname
					}
				} else {
					obj = {
						bankname: this.list[this.cur].bank_name,
						bankcard: this.list[this.cur].account
					}
				}
				uni.$post({
					url: '/api/Center/Putwithdrawal',
					data: {
						money: this.value,
						type: this.curtab == 0 ? 3 : 2,
						...obj
					}
				}).then(res => {
					getApp().tt(res.msg, 'success');
					this.getinfo(false)
					this.getlist(false)
				})
			}

		}
	}
</script>

<style>
	page {
		background: #ffffff;
	}


	.tw-box {
		padding: 34rpx 28rpx;
		width: 686rpx;
		height: 428rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #EBEBEB;
	}

	.white-box {
		width: 686rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 12rpx 2rpx #F1F1F1;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.card {
		height: 110rpx;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 0 20rpx 2rpx #f2f2f2;
		border: 2rpx solid #707070;
		padding: 0 26rpx;
	}

	.card-act {
		height: 110rpx;
		background: #f3fffe;
		border-radius: 16rpx;
		box-shadow: 0 0 20rpx 2rpx #f2f2f2;
		border: 2rpx solid #01796D;
		padding: 0 26rpx;
	}

	.card-box {
		width: 690rpx;
		height: 120rpx;
		background: #f6f8fc;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		padding: 0 20rpx;
	}
</style>